<template>
	<view class="content" :style="{paddingTop: (titleTop + statusBarHeight) + 'px'}">
		<view class="mainHeader" :style="{paddingTop: titleTop + 'px'}">
			<headNav class="headWrap" :minHeight="statusBarHeight" :navTitle="navTitle">
				<template #titleBox>
					<view class="cardInfo">
						<image :src="itemData.ActivityImg|completeUrl" mode="aspectFit" class="cardImg"></image>
						<view class="cardTitle">
							{{itemData.name}}
						</view>
					</view>
				</template>
			</headNav>
		</view>
		<!-- 		<view class="contentWrap" :style="{minHeight:'calc(100vh - '+(titleTop + statusBarHeight )+'px)'}">
 -->
		<view class="cardWrap">

			<view class="nav-item" v-for="(item, index) in packageList" :key="index">
				<cardBag :cardWidth='274' :cardHeight='274' :tagWidth='94' :cardData="item" :urlKey="'image_url'">
					<template #infoMore>
						<view class="price" v-if="false">
							<text class="unit">￥</text>
							200
						</view>
					</template>
				</cardBag>
			</view>

		</view>
		<view class="bntLay" @click="ordersCreateFn">
			<view class="price">
				<text class="unit">￥</text>
				{{itemData.price}}
			</view>
			<view class="bntTxt">
				<image src="/static/bntBg.png" class="bntBg" mode="aspectFit"></image>
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navTitle: '',
				shopId: '',
				id: '',
				itemData: {},
				packageList: [],
				page: 1, // 当前页码
				page_size: 10, // 每页数量
				total: 0, // 总数据量
				loading: false, // 是否正在加载
				noMoreData: false, // 是否没有更多数据
			}
		},
		onLoad(e) {
			let item = JSON.parse(e.itemData);
			this.shopId = e.shopId;
			this.id = item.id;
			this.itemData = item;
			this.resetList()
		},
		// 触底加载更多
		onReachBottom() {
			// 如果没有更多数据或正在加载，则返回
			if (this.noMoreData || this.loading) return

			// 页码增加并获取下一页数据
			this.page++
			this.watermarksWithImagesFn()
		},

		// 下拉刷新
		onPullDownRefresh() {
			this.resetList()
			// 设置超时自动停止刷新（防止接口失败导致一直刷新）
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 5000);
		},
		methods: {
			// 重置列表（用于下拉刷新）
			resetList() {
				this.page = 1
				this.noMoreData = false
				this.watermarksWithImagesFn()
			},
			watermarksWithImagesFn() {
				// 防止重复请求
				if (this.loading) return;

				// 设置加载状态
				this.loading = true;
				uni.showLoading({
					title: '加载中...'
				})
				try {
					// {{apiurl}}v1/machines/watermark-package/17
					this.$http(`/v1/machines/watermark-package/${this.id}/images`, {
						/* 			page: this.page,
									page_size: this.page_size, */

					}).then(res => {
						console.log(res);
						if (res.code === 0) {
							const
								data = res.data;
							// 如果是第一页，直接赋值
							if (this.page === 1) {
								this.packageList = data.images || []
							} else {
								// 后续页，合并数据
								this.packageList = [...this.packageList, ...(data.images || [])]
							}

							// 更新总数据量
							this.total = data.total || 0

							// 判断是否还有更多数据
							this.noMoreData = this.packageList.length >= this.total
							// this.packageList = res.data.list;
						} else {
							this.$showToast(res.msg)
						}
					})

				} catch (error) {
					console.error('请求失败:', error)
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					})
				} finally {
					// 重置加载状态
					this.loading = false
					uni.hideLoading();
					uni.stopPullDownRefresh();
				}
			},
			// 创建订单
			/* 抽奖类型: lottery = 抽奖,
			lotterybox = 端盒,
			purchase = 直购,
			purchasebox = 直购全部购买,
			watermark = 水印 */
			ordersCreateFn() {
				uni.setStorageSync('userSelects', this.itemData)
				// this.linkUrl(
				uni.navigateTo({
					url: `/pages/my/orderConfirmation?price=${this.itemData.price}&playType=watermark&shopId=${this.shopId}&machineId=${this.packageList[0].package_id}`
				})
				// )
				return
				this.$http('/v1/orders/create', {
					"type": "watermark",
					"shop_id": Number(this.shopId),
					"machine_id": this.packageList[0].package_id,
					"num": 1
				}, 'POST').then(res => {
					console.log(res);
					if (res.code == 0) {
						debugger;
						// 带着订单号去确认订单页面，扭蛋和补图不需要
						uni.navigateTo({
							url: '/pages/my/orderConfirmation?'
						})
						return
						let wechatParams = res.data.wechat_params
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: wechatParams.timeStamp,
							nonceStr: wechatParams.nonceStr,
							package: wechatParams.package,
							signType: wechatParams.signType,
							paySign: wechatParams.paySign,
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});

					} else {}
					this.$showToast(res.msg)
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	.content {
		// background-color: #FFFFFF;
		min-height: 100vh;
		background: #FFE9E9;
		border: 2rpx solid #FFD4D4;

		.mainHeader {
			@include flexLayout(center);
			background-color: #FFFFFF;
			position: fixed;
			top: 0;
			z-index: 9;

			.headWrap {
				padding-bottom: 20upx;

			}

			.cardInfo {
				@include flexLayout(center);

				.cardImg {
					@include setwh(94rpx, 94rpx);
					box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.18);
					margin-right: 20upx;
					border-radius: 50%;
				}

				.cardTitle {
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: 500;
					font-size: 38rpx;
					color: #454545;
				}

			}
		}

		/* 
		.contentWrap {
			background: #F9F9F9;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		} */
		.cardWrap {
			position: relative;
			overflow: hidden;
			padding: 66upx 56upx 200upx;
			@include flexLayout(center, flex-start);
			flex-wrap: wrap;
			row-gap: 44upx;
			column-gap: 28rpx;

			&::after,
			&:before {
				content: '';
				position: absolute;
				width: 332rpx;
				height: 426rpx;
				background: #FFD0D0;
				filter: blur(30upx);
				top: 0;
				z-index: 0;
				transform: rotate(45deg);
			}

			&::after {
				right: 0;
			}

			&:before {
				left: 86upx;
			}

			.nav-item {


				position: relative;
				z-index: 2;

				.price {
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: bold;
					font-size: 22rpx;
					color: #FF7994;
					line-height: 32rpx;
					text-align: right;
					padding-right: 6upx;

					.unit {
						font-size: 20rpx;
					}
				}
			}

		}

		.bntLay {
			width: 720rpx;
			height: 136rpx;
			// border-radius: 65rpx;
			// border: 2rpx solid #FFD0D0;
			// background-color: #FFC8C8;
			transform: translateX(-50%);
			left: 50%;
			@include flexLayout(center, center);
			font-family: SourceHanSansSC, SourceHanSansSC;
			position: fixed;
			bottom: 74upx;
			z-index: 9;

			.bntBg {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: -1;
			}

			.price {
				font-weight: bold;
				font-size: 38rpx;
				color: #FFFFFF;

				.unit {
					font-weight: 400;
					font-size: 32rpx;
				}
			}

			.bntTxt {
				font-weight: 500;
				font-size: 32rpx;
				color: #9E4C4C;
				margin-left: 20upx;
			}
		}
	}
</style>